<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>顾客诊断信息管理</title>
	<meta name="decorator" content="default"/>
	<script src="${ctxStatic}/jquery/jsrender.min.js" type="text/javascript"></script>
	<style type="text/css">
		td{text-align: left !important;}
		table {
	  		border: 0px solid #969696 !important;background-color: #fff;
	  	}
		td{text-align: left !important;}
	 	table tr{
 			height:40px;
 	 	}
		table tbody tr:nth-child(odd) td,
		table tbody tr:nth-child(odd) th {
		    background-color: #fff; /* non-RGBA fallback  */
		    background-color: rgba(255,255,255,.05);
		}
		#tabs{
	 		border:1px solid #e5e5e5; background-color:#F5FFFA ;
	 	}
	 	#tabs ul li{
	 		width:180px;display:inline-block;margin:0px;font-size:20px;
	 	}
	 	#tabs ul li a{
	 		font-size:18px;border: 0px solid #ddd;background:#e5e5e5;margin-right:3px;
	 		-webkit-border-radius: .3125em /*{global-radii-buttons}*/;
			border-radius: .3125em /*{global-radii-buttons}*/;
	 	}
	 	#tabs ul li a.ui-btn-active{
	 		background:#cc9900;color:#fff;text-shadow: 0  0 0 /*{a-active-shadow-radius}*/ #0a0a0b;
	 	}
	 	.solutionTable{
	 		width:100%;margin:auto;clear:both;background-color:#F5FFFA;
	 	}
	 	.solutionTable tr td {
	 		vertical-align: top;
	 	}
	 	.solutionTable .solutionUsage {
	 		background-color:#C52620;color:#fff;
	 	}
	 	.solutionTable .product-table{width:100%;height: 40px;background-color:#F5FFFA;}
	 	.solutionTable .product-table .stepTitle{
	 		text-align:center;
	 	}
	 	.solutionTable .product-table td{ 
	 		width:50%;vertical-align: top !important;
	 	}
	 	.solutionTable .product-table tr td:first-child{ 
	 		border-right:1px solid #ddd;
	 	}
	 	.solutionTable .product-table tr{ 
	 		border-top:1px solid #ddd;height:0px;
	 	}
	 	.solutionTable .product-table tr:first-child{ 
	 		border-top:0px;height:40px;line-height:40px;
	 	}
	 	.solutionTable .productHidden{
	 		display:none;
	 	}
	 	.solutionTable .mixtitle{
	 		height:32px;font-size:20px;font-weight:bold;line-height:32px; text-align:center;
	 	}
	 	.solutionTable .product{
	 	 	font-size:16px;font-weight:bold;width:100%;
	 	}
	 	.solutionTable .food{
	 		text-align: left!important;
	 	 	font-size:16px;font-weight:bold;
	 	}
	 	.solutionTable .care{
	 	 	font-size:16px;font-weight:bold;
	 	}
	 	.solutionTable .stepTitle{
	 		padding-left:30px;font-size:20px;text-align:left;
	 	}
	 	.solutionTable .product .title{
	 	 	height:32px;font-size:18px;line-height:32px;
	 	}
	 	.solutionTable .item{
	 	 	margin-top:20px;margin:auto;
	 	}
	 	.solutionTable .product .item{
	 	 	float:left;min-height:100px;border: 1px solid #ddd;
	 	 	width:240px;
	 		clear:both;margin-bottom:10px;margin-left:50px;
	 	}
	 	.solutionTable .product .item .left{
	 	 	width:135px;float:left;
	 	}
	 	.solutionTable .product .item .right{
	 	 	width:100px;height:110px;float:left;
	 	}
 		.solutionTable .food .item{
	 	 	display:inline-block;margin:10px 0px 10px 45px;width:220px;font-size:18px;
	 		border: 1px solid #ddd;box-shadow: 1 1 1  rgba(0,0,0,.2);
	 		-webkit-border-radius: .3125em /*{global-radii-buttons}*/;
			border-radius: .3125em /*{global-radii-buttons}*/;
			background:#F5FFFA;
	 	}
	 	.solutionTable .food .item .top{
		 	 padding:0px;border: 0;background:#F5FFFA;height:54px;
	 	}
	 	.solutionTable .food .item .bottom{
		 	 padding:0px;border: 0;background:#F5FFFA;
	 	}
	 	.solutionTable .food .item .ui-checkbox{
	 		margin:0px;
	 	}
	 	.solutionTable .food .item .bottom .noimg{
		 	width:100%;
	 	}
	 	.solutionTable .food img{
		 	max-width:150px;
	 	}
	 	.solutionTable .care .item{
	 	 	display:inline-block;margin:10px 0px 10px 25px;min-height:50px;width:400px;font-size:18px;line-height:50px;
	 		background:#F5FFFA;border: 1px solid #ddd;box-shadow: 1 1 1  rgba(0,0,0,.2);
	 	}
	 	.solutionTable img{
	 		max-width:100px;max-height:100px;margin:auto;
	 	}
	 	.solutionTable .noimg{
	 		width:100px;height:100px;margin-top:3px;
	 		text-align:center;line-height:100px;
	 	}
	 	.solutionTable .ui-collapsible-heading-toggle, .solutionTable .ui-collapsible-heading-toggle:hover{
		 	background: #fff /*{a-bup-background-color}*/;
			border-color: #777b12 /*{a-bup-border}*/;
			color: red /*{a-bup-color}*/;
	 	}
	</style>
	<script type="text/javascript">
		var jsonData = ${jsonData};
		$(document).ready(function() {	
			resultDetail(jsonData);
			$(".showProduct").click(function() {
				showProductHidden(this);
			});
			$(".product .item, .food .bottom, .care .item a").click(function() {
				$('#resultPanel').css('display','none');
				$('#header').hide();
				$('#footer').hide();
				$('#detailPanel').css('display','block');
				var url = "${ctx}/expert/"+ $(this).attr("type") +"/desc?id=" + $(this).attr("value");
				window.open(url,"datailFrame");
				document.getElementById("detailPanel").scrollIntoView();
				scrollToId = $(this).attr("type") + "-" + $(this).attr("value");
			});
			addParentPageNo();
			//设定产品明细页面高度
			$("#datailFrame").height($(window).height()-5);
		});
		
		function addParentPageNo() {
			var id = '${customerExamId}';
			var target = sessionStorage.urlTarget;
			var pageNo = 1;
			var href = "";
			if(id != "" && sessionStorage.parentPageNo) {
				pageNo = sessionStorage.parentPageNo;
			}
			if(target == 'resultList'){
				href = "${ctx}/expert/customerExam/resultList/?pageNo=" +pageNo + "&currentSelectId=" +id;	
			} else if (target == 'detail') {
				href = "${ctx}/expert/customerExam/list/?pageNo=" +pageNo + "&currentSelectId=" +id;	
			}
			$("#return").attr("href", href);
		}
		
		function getRenderData(jsonData) {
			var renderData = cloneJson(jsonData);
			for(var i=0; i< jsonData.length; i++) {
				var solution = jsonData[i];
				var stepList = solution.stepList;
				for(var j=0; j< stepList.length; j++){
					var mixList = stepList[j].mixList;
					renderData[i].stepList[j].mixList = [];
					var daylength = mixList[0].mixList.length;
					var nightlength = mixList[1].mixList.length;
					if(daylength < nightlength) {
						daylength = nightlength;
					}
					for(var k=0; k< daylength; k++){
						var arr = {mixList:[]};
						if(mixList[0].mixList[k]) {
							arr.mixList.push(mixList[0].mixList[k]);
						} else {
							arr.mixList.push({mixId:-1});
						}
						if(mixList[1].mixList[k]) {
							arr.mixList.push(mixList[1].mixList[k]);
						} else {
							arr.mixList.push({mixId:-1});
						}
						renderData[i].stepList[j].mixList.push(arr);
					}
				}
			}
			renderData.noimgUrl = '${ctxStatic}/images/noimg.png';
			return renderData;
		}
		
		function resultDetail(jsonData) {
            $( "#tabs" ).html("");
            var html = '<div data-role="navbar" id="navbars"><ul>'+
           	$( "#navTemplate" ).render(jsonData) +'</ul></div>' +
           	$( "#contentTemplate" ).render(getRenderData(jsonData));
            $( "#tabs" ).html(html);
        	$( "#tabs" ).tabs( "refresh" );
       		$( "#tabs" ).trigger('create');
       		$( "#navbars ul li:first-child a" ).click();
		}

		function showProductHidden(obj) {
			var productCss = $(obj).attr("status");
			var lis = $('.productHidden-' + productCss);
			var value = $(lis[0]).css('display');
			if(value == 'none') {
				$('.productShow-' + productCss).css('display','none');
				$('.productHidden-' + productCss).css('display','table-row');
			} else {
				$('.productShow-' + productCss).css('display','table-row');
				$('.productHidden-' + productCss).css('display','none');
			}
		}
		function returnResult(panel) {
			$('#header').show();
			$('#footer').show();
			$('#resultPanel').css('display','block');
			$('#' + panel).css('display','none');
			if(scrollToId != "") {
				document.getElementById(scrollToId).scrollIntoView();
			}
		}
	</script>
</head>
<body id="body">
<div id="resultPanel" style="overflow:auto;">
	<div class="icon-buttons">
		<a id="return" data-role="button" data-inline="true" data-icon="back" data-iconpos="notext"  href="">返回</a>
	</div>
	<div data-role="tabs" id="tabs">
  	</div>
</div>
 <div id="detailPanel" style="display:none;width:100%;height: 100%;">
 	<div class="icon-buttons">
		<a onclick="returnResult('detailPanel')" data-icon="back" data-iconpos="notext" data-role="button" data-inline="true">返回</a>
	</div>
	<iframe id="datailFrame" name="datailFrame" src="about:blank" 
		scrolling="yes" frameborder="no" width="100%">
	</iframe>
 </div>
<script id="navTemplate" type="text/x-jsrender">
	{{if index==0}}
		<li class="active">
	{{else}}
		<li>
	{{/if}}
	<a href="#tab{{>solutionId}}" data-toggle="tab">{{>solutionName}}</a></li>
</script>
<script id="contentTemplate" type="text/x-jsrender">
	{{if index==0}}
		<div class="tab-pane active" id="tab{{>solutionId}}">
	{{else}}
		<div class="tab-pane" id="tab{{>solutionId}}">
	{{/if}}
<table border="1" class="solutionTable">
<tr><th><h3>
		<a id="solutionFace-{{>solutionId}}" value="{{>solutionId}}" type="solutionFace">{{>solutionName}}</a>
	</h3>
</th></tr>

<tr class="productShow-{{>solutionId}}">
	<th class="showProduct" status="{{>solutionId}}">
		<div data-role="collapsible">
    			<h4>家居保养步骤（共{{>stepLength}}步）</h4>
<table border="1" class="solutionTable">
	{{for stepList}}
		<tr>
			<th style="width:8%">{{>stepText}}</th>
			<td><table class="product-table">
			<tr><th class="stepTitle line-td">日间</th><th class="stepTitle">夜间</th></tr>
			{{for mixList}}<tr>
						{{for mixList}}<td>
							{{if mixId==-1}}
								&nbsp;
							{{else}}
							<div class="product">
							<div class="title">
								<h3>{{if mixNeeded==1}}(*){{/if}}{{>mixName}}</h3>
								{{for detailList}}
									<div class="item" id="product-{{>productId}}" value="{{>productId}}" type="product">
										<div class="left">
											<p><a value="product-{{>productId}}">{{if productNeeded==1}}(*){{/if}}{{>productName}}</a></p>
											<p>数量:{{>productAmount}}</p>
											<P>混合比例：{{if productMixRatio=="-1"}}不参与混合配比{{/if}}	
												{{if productMixRatio!="-1"}}{{>productMixRatio}}{{/if}}
											</P>
										</div>
										<div class="right">{{if productImage!="#"}}
											<div class="noimg"><img src="{{>productImage}}" alt="产品图片" /></div>
										{{/if}}	
										{{if productImage=="#"}}
											<div class="noimg">无图片</div>
										{{/if}}	
										</div>	
									</div>
								{{/for}}
								</div>
							{{/if}}
						</td>{{/for}}
			<tr>{{/for}}
			</table></td>
		</tr>
	{{/for}}
</table>
		</div>
	</th></tr>
	<tr><th class="food">
		<div data-role="collapsible">
    			<h4>健康食品</h4>
    			<p>{{for foodList}}
					<div class="item">
						<div class="top">
							<h3>{{>productName}}(数量:{{>productAmount}})</h3>
						</div>
						<div class="bottom" value="{{>productId}}" type="product">{{if productImage!="#"}}
							<div class="noimg"><img src="{{>productImage}}" alt="产品图片" /></div>
							{{/if}}	
							{{if productImage=="#"}}
							<div class="noimg"><img src="{{:#parent.parent.parent.parent.data.noimgUrl}}" alt="无图片" /></div>
							{{/if}}	
							</div>						
						</div>
				{{/for}}
				</p>
		</div>
	</th></tr>

	<tr><th class="care">
		<div data-role="collapsible">
    			<h4>护理项目</h4>
				{{for careList}}
					<div class="item">
						<a id="care-{{>careId}}" value="{{>careId}}"  type="care">{{if careNeeded==1}}(*){{/if}}{{>careName}}</a>
					</div>
				{{/for}}
		</div>
	</th></tr>
	<tr class="solutionUsage"><th>这是为您解决了{{>solutionUsage}}问题</th></tr>
</table>
</div>
</script>
</body>
</html>